<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限轮播图</title>
    <style>
        *{ 
            padding:0; 
            margin:0; 
        }

        .loop-wrap{ 
            /* position: relative;  */
            height: 300px; 
            width:500px; 
            overflow:hidden; 
            margin:100px auto;  
        }

        .loop-images-container{
            /* position: absolute;
            left: 0;
            top: 0; */
            width: 500%;
            height: 100%;
            font-size: 0;
            transform: translate(0,0);
            animation: loop 10s linear infinite normal;
        }

        .loop-image{
            width: 500px;
            height: 300px;
        }

        @keyframes loop{
            0%{transform: translateX(0);}
            10% {transform: translateX(0);}

            15% {transform: translateX(-20%);}
            35% {transform: translateX(-20%);}

            40% {transform: translateX(-40%);}
            60% {transform: translateX(-40%);}

            65% {transform: translateX(-60%);}
            85% {transform: translateX(-60%);}

            90% {transform: translateX(-80%);}
            100% {transform: translateX(-80%);}

        }
    </style>
</head>
<body>
    <div class="loop-wrap">
        <div class="loop-images-container">
            <img src="./作业/img/1.jpg" alt="1" class="loop-image">
            <img src="./作业/img/2.jpg" alt="2" class="loop-image">
            <img src="./作业/img/3.jpg" alt="3" class="loop-image">
            <img src="./作业/img/4.jpg" alt="4" class="loop-image">
            <img src="./作业/img/1.jpg" alt="1" class="loop-image">
        </div>
    </div>
    
</body>
</html>